<ion-header>
  <ion-toolbar class="orange-bar">
    <ion-buttons slot="start">
      <ion-button color="light" (click)="goBack()">
        <ion-icon name="ios-arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>回款计划</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list *ngIf="dataList.length > 0; else noneBlock">
    <ion-item>
      <ion-grid>
        <ion-row>
          <ion-col class="flex-center">共{{dataList[0]?.totalPeriod}}期</ion-col>
          <ion-col class="flex-center">回款金额</ion-col>
          <ion-col text-right>回款日期</ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
    <ion-item *ngFor="let data of dataList">
      <ion-grid>
        <ion-row>
          <ion-col class="flex-center">
            第{{data.period }}期
          </ion-col>
          <ion-col class="flex-center">
            {{data.principalInterest}}元
          </ion-col>
          <ion-col text-right>
            {{data.repaymentTime | date:'yyyy-MM-dd'}}
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-list>
  <ng-template #noneBlock>
    <div class="content-bottom">
      未查询到相关数据
    </div>
  </ng-template>
</ion-content>
